<template>
  <div>
    <p>MQTT 消息: {{ mqttMessage }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { connectMqtt, disconnect, subscribe } from './mqtt.js';

const mqttMessage = ref('');
let client = null;

onMounted(() => {
  // 使用 ws 或 wss 协议，需 MQTT 服务器支持 WebSocket
  const url = 'ws://localhost:1883'; 
  // 可只传入部分配置，其余使用默认值
  const customOptions = {
    clientId: 'browser_client_123'
  };
  
  // 使用封装的 connectMqtt 函数连接 MQTT 服务器
  client = connectMqtt(
    url,
    customOptions,
    () => {
      console.log('MQTT 连接成功');
      // 使用封装的 subscribe 函数订阅主题
      subscribe('test/topic', {}, (err) => {
        if (!err) {
          console.log('订阅主题成功');
        }
      });
          // 订阅成功后发布消息
      //  publish('test/topic', 'Hello MQTT!', {}, (error) => {
      //     if (!error) {
      //       console.log('消息发布成功');
      //     }
      //   });
    },
    (topic, message) => {
      console.log(`收到来自 ${topic} 的消息: ${message}`);
      mqttMessage.value = message;
    },
    (error) => {
      console.error('MQTT 连接出错:', error);
    }
  );
});

onUnmounted(() => {
  // 使用封装的 disconnect 函数断开连接
  if (client) {
    disconnect(() => {
      console.log('MQTT 连接已断开');
    });
  }
});
</script>

<style scoped>
/* 样式代码 */
</style>